<!DOCTYPE html>
<html lang="en">

<head>
  <!-- GBK  GB2312 Big5  UTF-8  -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .cbg {
      width: 300px;
      height: 50px;
    }
  </style>
  <script>
    function myFindElement() {
      //  查找元素
      let d1 = document.getElementById("d1");
      console.log("d1 ", d1);


      //给div 设置 style属性
      d1.style.backgroundColor = "#666666"


      let ps = document.getElementsByTagName("p")
      console.log("ps", ps);

      for (let i = 0; i < ps.length; i++) {
        ps[i].style.border = "solid 1px green"
      }


    }


    function myCreateElement() {
      //创建的元素默认在内存中给，
      let h1 = document.createElement("h1");


      //设置h1的文本

      h1.innerText = "追加的标题1"


      //找到body
      // let body = document.getElementsByTagName("body")
      let body = document.body;
      // console.dir( body);
      // console.log("body", body);

      body.appendChild(h1)


    }


    function myRemoveElement() {
      let body = document.body;
      let d1 = document.getElementById("d1");


      body.removeChild(d1)
    }

  </script>
</head>

<body>
  <button onclick="myFindElement()">找到一个元素</button>
  <button onclick="myCreateElement()">创建一个元素</button>
  <button onclick="myRemoveElement()">删除一个元素</button>
  <div id="d1">
    测试的div

  </div>


  <p class="cbg"></p>
  <!-- <p class="cbg"></p>
  <p class="cbg"></p>
  <p class="cbg"></p>
  <p class="cbg"></p> -->









</body>

</html>